/* Colors */
  body {
    --main-light:#0000ff;
    --main:#000080;
    --main-dark:#000057;
    --main-grad: linear-gradient(var(--main-light),var(--main),var(--main-dark));
    --main-darg: linear-gradient(var(--main-dark),var(--main),var(--main-light));
    
    --math-light:#F77;
    --math:#F33;
    --math-dark:#C00;
    --math-grad: linear-gradient(var(--math-light),var(--math),var(--math-dark));
    --math-darg: linear-gradient(var(--math-dark),var(--math),var(--math-light));
    
    --vib-light:#0BF;
    --vib:#07F;
    --vib-dark:#03F;
    --vib-grad: linear-gradient(var(--vib-light),var(--vib),var(--vib-dark));
    --vib-darg: linear-gradient(var(--vib-dark),var(--vib),var(--vib-light));
    
    --acs-light:#FC9;
    --acs:#FC0;
    --acs-dark:#F90;
    --acs-grad: linear-gradient(var(--acs-light),var(--acs),var(--acs-dark));
    --acs-darg: linear-gradient(var(--acs-dark),var(--acs),var(--acs-light));
    
    --slide-light:#F6F;
    --slide:#B0B;
    --slide-dark:#909;
    --slide-grad: linear-gradient(var(--slide-light),var(--slide),var(--slide-dark));
    --slide-darg: linear-gradient(var(--slide-dark),var(--slide),var(--slide-light));
    
    --engr-light:#7D7;
    --engr:#4C4;
    --engr-dark:#090;
    --engr-grad: linear-gradient(var(--engr-light),var(--engr),var(--engr-dark));
    --engr-darg: linear-gradient(var(--engr-dark),var(--engr),var(--engr-light));
  }
  html {
    line-height: 1.5;
    height:100%;
  }
  body {
    font-size: 14pt;
    font-family: Verdana, sans-serif;
    height:100%;
  }

  
/* Text */
  h1{
   font-family: "Times New Roman", serif;
   margin:0.5em;
   font-size: 3em;
   text-align:center;
   cursor:default;
  }
  h2{
   font-family: "Times New Roman", serif;
   margin:1em 0 0 0.75em;
   font-size: 2.25em;
   text-align:left;
   cursor:default;
  }
  hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border: 0.2vh solid var(--main);
    margin:0;
    box-shadow:0 4px 10px 1px navy;
  }
  b,strong {
    font-weight: bolder;
  }
  small {
    font-size: 80%;
  }
  a{
    background-color: transparent;
  }
  a:link   { color: navy; }
  a:visited{ color: navy; }
  a:hover  { color: blue; }
  pre,code,kbd,samp {
   font-family: monospace, monospace;
   font-size: 1em;
  }
  /* abbr[title] {
   border-bottom: none;
   text-decoration: underline;
   text-decoration: underline dotted;
  }
  sub,sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
  }
  sub {
   bottom: -0.25em;
  }
  sup {
   top: -0.5em;
  }
  kbd {
    border-radius: 3px;
    padding: 1px 2px;
    border: 1px solid black;
    background-color: silver;
    color: black;
  }
  */
 
/* Figure */
  div.figure{
    display: grid;
    margin:3% 2%;
    padding:1%;
    background:lavender;
    border:3px solid black;
    border-radius:30px;
    box-shadow:0 0 1em black;
    overflow:hidden;
  }
  @media screen and (max-width: 800px){
    div.figure{
     grid-template-columns: 100% !important;
    }
   }
  div.figure ul#control{
    margin:0;
    padding:0;
  }
  div.figure ul#control li{
    list-style-type:none;
    margin:1em auto;
  }
  div.figure ul#control label{
    display:inline-block;
  }
  div.figure ul#control{
    line-height:1.5;
  }
  div.figure ul#control input{
    accent-color:var(--main-light);
    cursor:pointer;
  }
  div.figure ul#control span{
    display:inline-block;
    width:2em;
  }
  div.figure ul#control input[type="checkbox"]{
    margin-right:0.75em;
  }
  div.figure ul#control input[type="range"]{
    margin-bottom:1em;
    display:block;
  }
  div.figure ul#control select{
    margin-left:0.5em;
    cursor:pointer;
  }
  
  
/* SVG */
  div.plot-container{
    max-height:75vh;
   }
  svg.plot-area {
    border:2px solid black;
    box-shadow:0 0 1em gray;
    -webkit-user-select: none;
    user-select: none;
    display: block;
    margin:auto;
    background: lavender;
    overflow: hidden;
    max-height:100%;
   }
  path.lines{
    stroke:black;
    fill:none;
  }


/* Reset Button */
.reset-button {
  background-image: linear-gradient(#606060,#282828);
  border: 0;
  border-radius: 0px 0px 0px 10px;
  box-shadow: #282828 0 5px 5px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  font-size: 1em;
  padding: 6px 10px;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  float: right;
  margin-right:0;
  position:relative;
  z-index:50;
  margin-bottom:-100%;
 }
.reset-button:hover {
  background-image: linear-gradient(#282828,#606060);
 }


/* Classes */
.hidden, [hidden] {
  display:none;
}
.centered{
  text-align:center;
}
.h-busy{
  background:red !important;
}